<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小学必背诗词随机抽查系统</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%);
      font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
    }
    .container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2vw;
    }
    .title {
      font-size: 2.2em;
      font-weight: bold;
      color: #fff;
      margin-bottom: 2vh;
      text-shadow: 1px 2px 8px #3e6b1a88;
      letter-spacing: 2px;
    }
    .poem-name {
      min-height: 2.5em;
      font-size: 2em;
      color: #2d4d0c;
      background: rgba(255,255,255,0.7);
      border-radius: 12px;
      padding: 0.5em 1.5em;
      margin-bottom: 2vh;
      box-shadow: 0 2px 8px #3e6b1a22;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .btn-row {
      display: flex;
      gap: 1.2em;
      margin-bottom: 1.2em;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn-row2 {
      display: flex;
      gap: 1.2em;
      margin-bottom: 2em;
      flex-wrap: wrap;
      justify-content: center;
    }
    button {
      font-size: 1.1em;
      padding: 0.6em 1.6em;
      border: none;
      border-radius: 8px;
      background: #4caf50;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 2px 6px #3e6b1a33;
      transition: background 0.2s, transform 0.1s;
    }
    button:active {
      background: #388e3c;
      transform: scale(0.97);
    }
    button:disabled {
      background: #b2dfdb;
      color: #eee;
      cursor: not-allowed;
    }
    .modal-bg {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .modal {
      background: #fff;
      border-radius: 14px;
      max-width: 95vw;
      width: 420px;
      box-shadow: 0 4px 24px #3e6b1a44;
      padding: 2em 1.2em 1.2em 1.2em;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: popin 0.2s;
    }
    @keyframes popin {
      from { transform: scale(0.8); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .modal-title {
      font-size: 1.3em;
      font-weight: bold;
      margin-bottom: 0.7em;
      color: #388e3c;
      text-align: center;
    }
    .modal-content {
      font-size: 1.1em;
      color: #222;
      white-space: pre-wrap;
      margin-bottom: 1.5em;
      text-align: left;
      width: 100%;
    }
    .modal-btn-row {
      display: flex;
      justify-content: flex-end;
      width: 100%;
    }
    .footer {
      width: 100%;
      text-align: center;
      padding: 1.2em 0 0.7em 0;
      color: #fff;
      font-size: 1em;
      letter-spacing: 1px;
      text-shadow: 1px 2px 8px #3e6b1a88;
      background: none;
      user-select: none;
    }
    @media (max-width: 600px) {
      .title { font-size: 1.3em; }
      .poem-name { font-size: 1.1em; }
      .modal { width: 98vw; padding: 1.2em 0.5em 0.7em 0.5em; }
      button { font-size: 1em; padding: 0.5em 1em; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="title">小学必背诗词随机抽查系统</div>
    <div class="poem-name" id="poemName">——</div>
    <div class="btn-row">
      <button id="startBtn">开始随机抽查</button>
      <button id="stopBtn" disabled>暂停</button>
    </div>
    <div class="btn-row2">
      <button id="showAnswerBtn" disabled>查看诗词答案</button>
    </div>
  </div>
  <div class="footer">由 老亓 用 Cursor 1分钟生成，你也可以去尝试制作</div>
  <div id="modalBg" class="modal-bg" style="display:none;">
    <div class="modal">
      <div class="modal-title" id="modalTitle"></div>
      <div class="modal-content" id="modalContent"></div>
      <div class="modal-btn-row">
        <button id="closeModalBtn">关闭弹窗</button>
      </div>
    </div>
  </div>
  <script>
    // 小学必背古诗词（尽量全，按年级分组，部分内容略有删减，实际可补充）
    const poems = [
      // 一年级
      { name: "咏鹅（骆宾王）", content: `鹅，鹅，鹅，\n曲项向天歌。\n白毛浮绿水，\n红掌拨清波。` },
      { name: "静夜思（李白）", content: `床前明月光，\n疑是地上霜。\n举头望明月，\n低头思故乡。` },
      { name: "悯农（一）（李绅）", content: `锄禾日当午，\n汗滴禾下土。\n谁知盘中餐，\n粒粒皆辛苦。` },
      { name: "悯农（二）（李绅）", content: `春种一粒粟，\n秋收万颗子。\n四海无闲田，\n农夫犹饿死。` },
      { name: "登鹳雀楼（王之涣）", content: `白日依山尽，\n黄河入海流。\n欲穷千里目，\n更上一层楼。` },
      { name: "望庐山瀑布（李白）", content: `日照香炉生紫烟，\n遥看瀑布挂前川。\n飞流直下三千尺，\n疑是银河落九天。` },
      // 二年级
      { name: "春晓（孟浩然）", content: `春眠不觉晓，\n处处闻啼鸟。\n夜来风雨声，\n花落知多少。` },
      { name: "村居（高鼎）", content: `草长莺飞二月天，\n拂堤杨柳醉春烟。\n儿童散学归来早，\n忙趁东风放纸鸢。` },
      { name: "所见（袁枚）", content: `牧童骑黄牛，\n歌声振林樾。\n意欲捕鸣蝉，\n忽然闭口立。` },
      { name: "小池（杨万里）", content: `泉眼无声惜细流，\n树阴照水爱晴柔。\n小荷才露尖尖角，\n早有蜻蜓立上头。` },
      { name: "江南（汉乐府）", content: `江南可采莲，\n莲叶何田田。\n鱼戏莲叶间。\n鱼戏莲叶东，\n鱼戏莲叶西，\n鱼戏莲叶南，\n鱼戏莲叶北。` },
      // 三年级
      { name: "赠汪伦（李白）", content: `李白乘舟将欲行，\n忽闻岸上踏歌声。\n桃花潭水深千尺，\n不及汪伦送我情。` },
      { name: "早发白帝城（李白）", content: `朝辞白帝彩云间，\n千里江陵一日还。\n两岸猿声啼不住，\n轻舟已过万重山。` },
      { name: "望天门山（李白）", content: `天门中断楚江开，\n碧水东流至此回。\n两岸青山相对出，\n孤帆一片日边来。` },
      { name: "绝句（杜甫）", content: `两个黄鹂鸣翠柳，\n一行白鹭上青天。\n窗含西岭千秋雪，\n门泊东吴万里船。` },
      { name: "忆江南（白居易）", content: `江南好，\n风景旧曾谙。\n日出江花红胜火，\n春来江水绿如蓝。\n能不忆江南？` },
      // 四年级
      { name: "夜宿山寺（李白）", content: `危楼高百尺，\n手可摘星辰。\n不敢高声语，\n恐惊天上人。` },
      { name: "敕勒歌（北朝民歌）", content: `敕勒川，阴山下。\n天似穹庐，笼盖四野。\n天苍苍，野茫茫，\n风吹草低见牛羊。` },
      { name: "游子吟（孟郊）", content: `慈母手中线，\n游子身上衣。\n临行密密缝，\n意恐迟迟归。\n谁言寸草心，\n报得三春晖。` },
      { name: "清明（杜牧）", content: `清明时节雨纷纷，\n路上行人欲断魂。\n借问酒家何处有，\n牧童遥指杏花村。` },
      { name: "江雪（柳宗元）", content: `千山鸟飞绝，\n万径人踪灭。\n孤舟蓑笠翁，\n独钓寒江雪。` },
      // 五年级
      { name: "黄鹤楼送孟浩然之广陵（李白）", content: `故人西辞黄鹤楼，\n烟花三月下扬州。\n孤帆远影碧空尽，\n唯见长江天际流。` },
      { name: "枫桥夜泊（张继）", content: `月落乌啼霜满天，\n江枫渔火对愁眠。\n姑苏城外寒山寺，\n夜半钟声到客船。` },
      { name: "渔歌子（张志和）", content: `西塞山前白鹭飞，\n桃花流水鳜鱼肥。\n青箬笠，绿蓑衣，\n斜风细雨不须归。` },
      { name: "滁州西涧（韦应物）", content: `独怜幽草涧边生，\n上有黄鹂深树鸣。\n春潮带雨晚来急，\n野渡无人舟自横。` },
      { name: "望洞庭（刘禹锡）", content: `湖光秋月两相和，\n潭面无风镜未磨。\n遥望洞庭山水翠，\n白银盘里一青螺。` },
      // 六年级
      { name: "己亥杂诗（龚自珍）", content: `浩荡离愁白日斜，\n吟鞭东指即天涯。\n落红不是无情物，\n化作春泥更护花。` },
      { name: "竹石（郑燮）", content: `咬定青山不放松，\n立根原在破岩中。\n千磨万击还坚劲，\n任尔东西南北风。` },
      { name: "浣溪沙（苏轼）", content: `游蕲水清泉寺，\n寺临兰溪，溪水西流。\n山下兰芽短浸溪，\n松间沙路净无泥。\n潇潇暮雨子规啼，\n谁道人生无再少？\n门前流水尚能西！\n休将白发唱黄鸡。` },
      { name: "登飞来峰（王安石）", content: `飞来山上千寻塔，\n闻说鸡鸣见日升。\n不畏浮云遮望眼，\n自缘身在最高层。` },
      { name: "题西林壁（苏轼）", content: `横看成岭侧成峰，\n远近高低各不同。\n不识庐山真面目，\n只缘身在此山中。` },
      // 可继续补充更多诗词...
    ];

    let rolling = false;
    let rollingTimer = null;
    let currentIndex = null;

    const poemNameEl = document.getElementById('poemName');
    const startBtn = document.getElementById('startBtn');
    const stopBtn = document.getElementById('stopBtn');
    const showAnswerBtn = document.getElementById('showAnswerBtn');
    const modalBg = document.getElementById('modalBg');
    const modalTitle = document.getElementById('modalTitle');
    const modalContent = document.getElementById('modalContent');
    const closeModalBtn = document.getElementById('closeModalBtn');

    function randomIndex() {
      return Math.floor(Math.random() * poems.length);
    }

    function startRolling() {
      rolling = true;
      startBtn.disabled = true;
      stopBtn.disabled = false;
      showAnswerBtn.disabled = true;
      rollingTimer = setInterval(() => {
        currentIndex = randomIndex();
        poemNameEl.textContent = poems[currentIndex].name;
      }, 60);
    }

    function stopRolling() {
      if (!rolling) return;
      rolling = false;
      startBtn.disabled = false;
      stopBtn.disabled = true;
      showAnswerBtn.disabled = false;
      clearInterval(rollingTimer);
    }

    function showAnswer() {
      if (currentIndex === null) return;
      modalTitle.textContent = poems[currentIndex].name;
      modalContent.textContent = poems[currentIndex].content;
      modalBg.style.display = 'flex';
      closeModalBtn.disabled = false;
    }

    function closeModal() {
      modalBg.style.display = 'none';
    }

    startBtn.addEventListener('click', startRolling);
    stopBtn.addEventListener('click', stopRolling);
    showAnswerBtn.addEventListener('click', showAnswer);
    closeModalBtn.addEventListener('click', closeModal);

    // 只有暂停状态下才能关闭弹窗
    modalBg.addEventListener('click', function(e) {
      if (e.target === modalBg && !rolling) closeModal();
    });
    closeModalBtn.addEventListener('click', function() {
      if (!rolling) closeModal();
    });
    // 弹窗按钮在暂停状态下可用
    function updateCloseBtn() {
      closeModalBtn.disabled = rolling;
    }
    setInterval(updateCloseBtn, 200);
  </script>
</body>
</html> 